import { mockApi } from './api.js';

// DOM元素
const articleListElement = document.getElementById('articleList');
const categoriesListElement = document.getElementById('categoriesList');
const popularPostsElement = document.getElementById('popularPosts');
const tagCloudElement = document.getElementById('tagCloud');
const themeToggle = document.getElementById('themeToggle');

// 渲染文章列表
function renderArticles(articles) {
    articleListElement.innerHTML = articles.map(article => `
        <div class="article-card" data-id="${article.id}">
            <div class="article-image" style="background-image: ${article.cover_image};"></div>
            <div class="article-content">
                <div class="article-meta">
                    <span><i class="far fa-calendar"></i> ${article.created_at}</span>
                    <span><i class="far fa-user"></i> ${article.user.username}</span>
                    <span><i class="far fa-clock"></i> ${article.readTime}</span>
                    <span><i class="far fa-eye"></i> ${article.view_count}次阅读</span>
                </div>
                <h3 class="article-title">${article.title}</h3>
                <div class="article-tags">
                    ${article.tags.map(tag => `<span class="tag">${tag.name}</span>`).join('')}
                </div>
                <p class="article-excerpt">${article.excerpt}</p>
                <a href="article.html?id=${article.id}" class="read-more" data-id="${article.id}">阅读全文 <i class="fas fa-arrow-right"></i></a>
            </div>
        </div>
    `).join('');
}

// 渲染分类列表
function renderCategories(categories) {
    categoriesListElement.innerHTML = categories.map(category => `
        <li>
            <a href="#">${category.name}</a>
            <span>(${category.count})</span>
        </li>
    `).join('');
}

// 渲染热门文章
function renderPopularPosts(posts) {
    popularPostsElement.innerHTML = posts.map(post => `
        <div class="post" data-id="${post.id}">
            <div class="post-image" style="background-image: ${post.image};"></div>
            <div class="post-content">
                <h4>${post.title}</h4>
                <div class="date">${post.date} · ${post.views}次阅读</div>
            </div>
        </div>
    `).join('');
}

// 渲染标签云
function renderTagCloud(tags) {
    tagCloudElement.innerHTML = tags.map(tag => `
        <span class="tag">${tag.name}</span>
    `).join('');
}

// 初始化页面
function initPage() {
    // 获取文章数据
    mockApi.getArticlesV1()
        .then(data => {
            renderArticles(data.data.data.posts);
            renderPopularPosts(data.popularPosts);
        });

    // 获取标签数据
    mockApi.getTags()
        .then(data => {
            renderTagCloud(data.data.data.tags);
        });
    
    // 获取分类数据
    mockApi.getCategories()
        .then(data => {
            renderCategories(data.data.data.categories);
        });

    // 深色/浅色模式切换
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');
        const icon = themeToggle.querySelector('i');
        if (document.body.classList.contains('dark-mode')) {
            icon.classList.remove('fa-moon');
            icon.classList.add('fa-sun');
            localStorage.setItem('theme', 'dark');
        } else {
            icon.classList.remove('fa-sun');
            icon.classList.add('fa-moon');
            localStorage.setItem('theme', 'light');
        }
    });
    
    // 检查本地存储中的主题设置
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        document.body.classList.add('dark-mode');
        const icon = themeToggle.querySelector('i');
        icon.classList.remove('fa-moon');
        icon.classList.add('fa-sun');
    }
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initPage);